<template>
  <div class="container">
    <!-- 页面顶部 -->
    <div class="page-header">
      <div class="destination-links">
        <span class="link">目的地</span>
        <span class="separator">〉</span>
        <span class="link">泰国</span>
        <span class="separator">〉</span>
        <span class="current">曼谷</span>
      </div>
    </div>

    <!-- 顶部区域：地方信息展示 -->
    <div class="destination-header">
      <h1>曼谷芭提雅经典五日游</h1>
      <div class="destination-info">
        <div class="left-info">
          <span class="meta-item"><icon-clock-circle-outlined /> 最佳季节: 11月-3月</span>
          <div class="popularity-tag">
            <span class="hot-tag">52%</span>
            <span class="tag-desc">初次访问泰国的蜂蜂会选择这条线路</span>
          </div>
        </div>
        <div class="action-btns">
          <span class="btn-like"><icon-like-outlined /> 点赞 578781</span>
          <span class="btn-collect"><icon-star-outlined /> 收藏 8591</span>
          <span class="btn-edit"><icon-edit-outlined /> 编辑</span>
          <span class="btn-share"><icon-share-alt-outlined /> 分享</span>
        </div>
      </div>
    </div>

    <!-- 标签页区域 -->
    <div class="tab-container" ref="tabContainer">
      <div class="tabs" :class="{ 'fixed-tabs': isTabFixed }">
        <div class="tab" 
          v-for="(tab, index) in tabs" 
          :key="index"
          :class="{ 'active-tab': activeTabIndex === index }"
          @click="scrollToSection(index)">
          {{ tab.name }}
        </div>
      </div>
    </div>
      
    <!-- 内容区域 - 所有内容都展示在一个页面上 -->
    <div class="sections-content">
      <!-- 行程概况内容 -->
      <div id="section-0" class="content-section" ref="sections0">
        <div class="route-overview">
          <h3>路线概览</h3>
          <div class="route-map">
            <div class="route-line">
              <span class="city">曼谷</span>
              <span class="arrow">→</span>
              <span class="city">芭提雅</span>
            </div>
            <div class="map-image">
              <img src="../assets/img.png" alt="路线地图" />
            </div>
          </div>
          
          <div class="route-summary">
            <h3>总结</h3>
            <p>路线按最点热度和位置来安排，5天时间不仅可以游玩曼谷、芭提雅知名景点，还可以在热门商圈血拼，让自己满载而归。</p>
          </div>
        </div>
      </div>

      <!-- 行程详情内容 -->
      <div id="section-1" class="content-section" ref="sections1">
        <div class="day-itinerary">
          <div class="day-header">
            <div class="day-tag">D1</div>
            <div class="day-title">曼谷</div>
          </div>
          <div class="day-description">
            <p>今日正式开启曼谷之行，上午参观大皇宫、卧佛寺，其中大皇宫还包含玉佛寺、大皇宫、柚木宫的景点门票，可一同参观。下午参观著有"泰国埃菲尔铁塔"之称的郑王庙，然后前往考山路，晚上安排坐游船游湄南河。</p>
          </div>
          
          <div class="attractions">
            <div class="attraction-item">
              <i class="location-icon"></i>
              <span class="attraction-name">曼谷大皇宫</span>
              <span class="attraction-duration">(约3小时)</span>
              <span class="walking-time">步行约53分钟</span>
            </div>
            
            <div class="attraction-item">
              <i class="location-icon"></i>
              <span class="attraction-name">泰国卧佛寺</span>
              <span class="attraction-duration">(约0.5小时)</span>
              <span class="driving-time">路程约7分钟</span>
            </div>
            
            <div class="attraction-item">
              <i class="location-icon"></i>
              <span class="attraction-name">郑王庙</span>
              <span class="attraction-duration">(约0.5小时)</span>
              <span class="driving-time">路程约20分钟</span>
            </div>
            
            <div class="attraction-item">
              <i class="location-icon"></i>
              <span class="attraction-name">考山路</span>
              <span class="attraction-duration">(约2小时)</span>
              <span class="public-transport">公交约30分钟</span>
            </div>
            
            <div class="attraction-item">
              <i class="location-icon"></i>
              <span class="attraction-name">湄南河</span>
              <span class="attraction-duration">(约2小时)</span>
            </div>
          </div>
          
          <div class="day-gallery">
            <div class="gallery-item">
              <img src="../assets/img.png" alt="曼谷大皇宫" />
              <div class="gallery-caption">曼谷大皇宫</div>
            </div>
            
            <div class="gallery-item">
              <img src="../assets/img1.png" alt="泰国卧佛寺" />
              <div class="gallery-caption">泰国卧佛寺</div>
            </div>
            
            <div class="gallery-item">
              <img src="../assets/img2.png" alt="郑王庙" />
              <div class="gallery-caption">郑王庙</div>
            </div>
            
            <div class="gallery-item">
              <img src="../assets/img3.png" alt="考山路" />
              <div class="gallery-caption">考山路</div>
            </div>
          </div>
          
          <div class="transportation-info">
            <h4><i class="transport-icon"></i> 交通攻略</h4>
            <p>前往大皇宫需要乘坐轻轨和公交船，轻轨票价：15-40泰铢，BTS（轻轨）需要在Saphan Taksin站坐船，坐N8号船到佛寺，船票3泰铢/人。</p>
            <p>郑王庙在卧佛寺的对面，需要在N8号船前往，船票3泰铢/人。参观完郑王庙再乘船返回N8，搭乘公交船前往考山路即可。</p>
          </div>
          
          <div class="ticket-info">
            <h4><i class="ticket-icon"></i> 门票攻略</h4>
            <p>大皇宫门票：500泰铢/人，开放时间：8:30-15:30</p>
            <p>卧佛寺门票：200泰铢/人，开放时间：8:00-17:00</p>
            <p>郑王庙门票：50泰铢/人，开放时间：8:30-17:30</p>
          </div>
        </div>
      </div>

      <!-- 签证攻略内容 -->
      <div id="section-2" class="content-section" ref="sections2">
        <h3>泰国签证攻略</h3>
        <div class="visa-info">
          <div class="visa-section">
            <h4>签证类型</h4>
            <p>泰国目前对中国公民提供以下几种签证选择：</p>
            <ul>
              <li>落地签证（Tourist Visa on Arrival）- 停留期15天</li>
              <li>旅游签证（Tourist Visa）- 停留期60天，可延期30天</li>
              <li>电子签证（E-Visa）- 可在线申请的旅游签证</li>
              <li>免签入境 - 自2023年9月25日起，中国公民可免签入境泰国并停留不超过30天</li>
            </ul>
          </div>
          
          <div class="visa-section">
            <h4>所需材料</h4>
            <p>申请泰国签证需准备以下材料：</p>
            <ul>
              <li>护照原件（有效期6个月以上，至少有2页空白页）</li>
              <li>填写完整的签证申请表</li>
              <li>近期2寸彩色照片2张（白底）</li>
              <li>往返机票预订单</li>
              <li>酒店预订证明</li>
              <li>最近3个月的银行对账单（建议余额2万元以上）</li>
              <li>在职证明或学生证明（视情况而定）</li>
            </ul>
          </div>
          
          <div class="visa-section">
            <h4>申请流程</h4>
            <ol>
              <li>准备所需材料</li>
              <li>前往泰国使馆或领事馆递交申请（或通过代理机构办理）</li>
              <li>缴纳签证费用（约230-280元人民币）</li>
              <li>等待审批（通常需要3-5个工作日）</li>
              <li>领取签证</li>
            </ol>
          </div>
          
          <div class="visa-section">
            <h4>注意事项</h4>
            <ul>
              <li>免签政策可能随时调整，出行前请及时查询最新政策</li>
              <li>入境时需携带不少于1万泰铢或等值外币的现金</li>
              <li>入境时海关可能会抽查行程单及住宿证明</li>
              <li>泰国严禁携带电子烟入境</li>
              <li>签证有效期与停留期概念不同，请注意区分</li>
            </ul>
          </div>
          
          <div class="visa-section">
            <h4>实用链接</h4>
            <p>泰国驻华大使馆官网：<a href="#">http://www.thaiembbeij.org/</a></p>
            <p>电子签证申请官网：<a href="#">https://www.thaievisa.go.th/</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { 
  ClockCircleOutlined, 
  LikeOutlined, 
  StarOutlined, 
  EditOutlined, 
  ShareAltOutlined 
} from '@ant-design/icons-vue';

// 标签页数据
const tabs = [
  { name: '行程概况' },
  { name: '行程详情' },
  { name: '签证攻略' }
];

// 当前激活的标签页索引
const activeTabIndex = ref(0);

// 标签容器引用
const tabContainer = ref(null);
const sections0 = ref(null);
const sections1 = ref(null);
const sections2 = ref(null);

// 标签是否固定在顶部
const isTabFixed = ref(false);

// 标签容器距离顶部的位置
let tabContainerTop = 0;

// 滚动到对应的内容区域
const scrollToSection = (index) => {
  activeTabIndex.value = index;
  
  const sectionId = `section-${index}`;
  const sectionElement = document.getElementById(sectionId);
  
  if (sectionElement) {
    // 计算需要滚动的位置，减去导航栏高度
    const offsetTop = sectionElement.offsetTop - 50;
    
    // 平滑滚动到目标位置
    window.scrollTo({
      top: offsetTop,
      behavior: 'smooth'
    });
  }
};

// 处理页面滚动事件，检测当前在哪个区域
const handleScroll = () => {
  if (!tabContainer.value) return;
  
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  // 检查是否需要固定标签
  isTabFixed.value = scrollTop > tabContainerTop;
  
  // 检测当前是哪个区域在视口中
  const section0Top = sections0.value ? sections0.value.offsetTop - 100 : 0;
  const section1Top = sections1.value ? sections1.value.offsetTop - 100 : 0;
  const section2Top = sections2.value ? sections2.value.offsetTop - 100 : 0;
  
  if (scrollTop >= section2Top) {
    activeTabIndex.value = 2;
  } else if (scrollTop >= section1Top) {
    activeTabIndex.value = 1;
  } else if (scrollTop >= section0Top) {
    activeTabIndex.value = 0;
  }
};

// 组件挂载后的操作
onMounted(() => {
  // 获取标签容器距离页面顶部的距离
  if (tabContainer.value) {
    tabContainerTop = tabContainer.value.offsetTop;
  }
  
  // 添加滚动事件监听
  window.addEventListener('scroll', handleScroll);
});

// 组件卸载前的清理操作
onUnmounted(() => {
  // 移除滚动事件监听
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 100px auto;
  min-height: 100vh;
  color: #dddddd;
  font-family: Arial, sans-serif;
  padding-bottom: 30px;
}

/* 页面顶部导航链接样式 */
.page-header {
  padding: 15px 0;
  border-bottom: 1px solid #333;
}

.destination-links {
  font-size: 14px;
  color: #999;
}

.link {
  cursor: pointer;
  color: #999;
}

.link:hover {
  color: #9900cc;
}

.separator {
  margin: 0 5px;
  color: #555;
}

.current {
  color: #9900cc;
}

/* 顶部区域样式 */
.destination-header {
  padding: 20px 0;
  border-bottom: 1px solid #333;
}

.destination-header h1 {
  font-size: 24px;
  margin-bottom: 15px;
  font-weight: bold;
  color: #dddddd;
}

.destination-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.left-info {
  flex: 1;
}

.meta-item {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 14px;
  margin-bottom: 10px;
}

.popularity-tag {
  display: flex;
  align-items: center;
}

.hot-tag {
  background-color: #9900cc;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}

.tag-desc {
  margin-left: 8px;
  font-size: 14px;
  color: #999;
}

.action-btns {
  display: flex;
  gap: 15px;
}

.action-btns span {
  cursor: pointer;
  color: #999;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.btn-like:hover, .btn-collect:hover, .btn-edit:hover, .btn-share:hover {
  color: #9900cc;
}

/* 标签页样式 */
.tab-container {
  position: relative;
  border-bottom: 1px solid #333;
}

.tabs {
  display: flex;
  background-color: #1a1a24;
  padding: 0;
  transition: background-color 0.3s;
}

.fixed-tabs {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #1a1a24;
}

.tab {
  padding: 15px 20px;
  cursor: pointer;
  font-size: 16px;
  color: #999;
  position: relative;
  transition: color 0.3s;
}

.tab:hover {
  color: #9900cc;
}

.active-tab {
  color: #fff;
  font-weight: bold;
  background: linear-gradient(45deg, #660099, #9900cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.active-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #660099, #9900cc);
}

/* 内容区域样式 */
.sections-content {
  padding: 20px 0;
}

.content-section {
  padding: 20px 0;
  margin-bottom: 30px;
  border-bottom: 1px solid #333;
}

/* 行程概况样式 */
.route-overview h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #dddddd;
}

.route-map {
  margin-bottom: 20px;
}

.route-line {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.city {
  font-weight: bold;
  color: #dddddd;
}

.arrow {
  margin: 0 10px;
  color: #777;
}

.map-image {
  margin-top: 10px;
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
}

.map-image img {
  width: 100%;
  height: auto;
  display: block;
}

.route-summary {
  margin-top: 20px;
}

.route-summary p {
  line-height: 1.6;
  color: #aaa;
}

/* 行程详情样式 */
.day-itinerary {
  margin-bottom: 30px;
}

.day-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.day-tag {
  background: linear-gradient(135deg, #660099, #9900cc);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 10px;
}

.day-title {
  font-size: 18px;
  font-weight: bold;
  color: #dddddd;
}

.day-description {
  margin-bottom: 20px;
  line-height: 1.6;
  color: #aaa;
}

.attractions {
  margin-bottom: 20px;
}

.attraction-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #23232f;
  border-radius: 4px;
}

.location-icon {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #660099, #9900cc);
  border-radius: 50%;
  margin-right: 10px;
}

.attraction-name {
  font-weight: bold;
  margin-right: 5px;
  color: #dddddd;
}

.attraction-duration {
  color: #999;
  margin-right: 10px;
  font-size: 14px;
}

.walking-time, .driving-time, .public-transport {
  margin-left: auto;
  font-size: 14px;
  color: #999;
}

.day-gallery {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.gallery-item {
  flex: 0 0 200px;
  border-radius: 4px;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.gallery-caption {
  padding: 8px;
  text-align: center;
  font-size: 14px;
  background-color: #23232f;
  color: #aaa;
}

.transportation-info, .ticket-info {
  margin-top: 20px;
  padding: 15px;
  background-color: #23232f;
  border-radius: 4px;
}

.transportation-info h4, .ticket-info h4 {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #dddddd;
}

.transport-icon, .ticket-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background: linear-gradient(135deg, #660099, #9900cc);
  border-radius: 50%;
}

.transportation-info p, .ticket-info p {
  margin-bottom: 8px;
  line-height: 1.5;
  color: #aaa;
}

/* 签证攻略样式 */
.visa-content h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #dddddd;
}

.visa-section {
  margin-bottom: 25px;
}

.visa-section h4 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #dddddd;
  border-left: 3px solid #9900cc;
  padding-left: 10px;
}

.visa-section p, .visa-section li {
  line-height: 1.6;
  color: #aaa;
  margin-bottom: 5px;
}

.visa-section ul, .visa-section ol {
  padding-left: 20px;
  margin-bottom: 10px;
}

.visa-section a {
  color: #9966cc;
  text-decoration: none;
}

.visa-section a:hover {
  text-decoration: underline;
  color: #aa77dd;
}
</style>